<template>
    <mt-swipe :auto="4000">
        <mt-swipe-item v-for="(item,i) in lunbotu" :key="i">
            <img :src="item[imgname]" alt="" :class="[isfull ? 'img-full' : 'img-normal']" >
        </mt-swipe-item>
    </mt-swipe>
</template>

<script>
export default {
    props: ['lunbotu','imgname','isfull'] // 将来，谁使用这个 轮播图组件，就必须为其传递一个lunbotu的数组，同时，只能接收img属性的图片展示出来
}
</script>

<style lang="scss">
   // 轮播图
    .mint-swipe{
        height: 150px;

        .mint-swipe-item{
            // 在父子元素中，直接让子元素居中显示[图片：行内替换元素、span、a行内元素、div、p块级元素]
            text-align: center;
            .img-full{
                // 应用这个类之后，则图片的宽度和高度是撑满父元素
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
            .img-normal{
                // 如果给图片添加这个类，则图片高度100%，宽度是 自适应，横向的位置值居中显示
                height: 100%;
            }
        }
    }
</style>